<template>
	<view class="open-vip" v-if="inner_show && !isVip">
		<block v-if="checked">
			<view class="left">
				<image src="https://xyshop.outletds.com/img/crown.png" mode="aspectFit"></image>
				<view>{{userInfo.vip_level == 0 ? '开通SVIP会员' : '您已开通SVIP会员'}} <text style="margin: 0 10rpx;">|</text>
					尊享身份特权</view>
			</view>
			<view class="open-vip-btn" @click="jumpPage()">{{userInfo.vip_level == 0 ? '开通SVIP' : '查看权益'}}</view>
		</block>
		<block v-else>
			<view class="left">
				<image src="https://xyshop.outletds.com/img/crown.png" mode="aspectFit"></image>
				<view>开通SVIP会员<text style="margin: 0 10rpx;">|</text> 尊享身份特权</view>
			</view>
			<view class="open-vip-btn" @click="vipNavigate(1)">开通SVIP</view>
		</block>
	</view>
</template>

<script>
	import {
		loginPrefix
	} from "@/utils/permission";
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "vipCard",
		data() {
			return {
				inner_show: false
			};
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			// 是否检查状态
			checked: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			show(val) {
				this.inner_show = val
			}
		},
		computed: {
			...mapGetters(["userInfo", 'isVip']),
		},
		created() {
			this.setShow()
		},
		methods: {
			jumpPage() {
				if (this.userInfo.vip_level != 0) {
					this.$Router.pushTab("/pages/tabs/memberIntro/memberIntro")
				} else {
					this.vipNavigate(1)
				}
			},
			// vip开通
			vipNavigate(type) {
				loginPrefix().then(() => {
					this.$Router.pushTab('/pages/tabs/memberIntro/memberIntro')
				});
			},
			setShow() {
				let flag = false;
				if (!this.userInfo) {
					this.inner_show = false
					return
				}
				if (this.isVip) {
					this.inner_show = false
				} else {
					this.inner_show = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.open-vip {
		background: linear-gradient(to right, #D6A75F, #CB722C);
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFF;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 10rpx;
		}

		.left {
			@extend .flex-center;
		}

		.open-vip-btn {
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 30rpx;
			color: #CD711E;
		}
	}
</style>
